<template>

  <el-row class="mb-4">
    <el-button type="danger" @click="delByIds">删除</el-button>
    <!-- 这里是点击切换 控制模态框显示、隐藏 -->
    <el-button @click="dialogVisible=true">新增</el-button>
    <el-button type="primary">导入</el-button>
    <el-button type="success">导出</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
  </el-row>

  <!-- iPage.data:拿到后端传递过来的数据List 进行循环输出 elementPlus 封装了循环操作 -->
  <!-- @selection-change: elementPlus 表格中选择方法 和下面的type="selection"配合使用 可以将所有的id保存  -->
  <el-table :data="iPage.data" border style="width: 100%;" @selection-change="selectAll" stripe >
    <!-- 表格列 prop:checkbox 选择 -->
    <el-table-column type="selection" width="55" />
    <!-- 表格列 prop:将上面的iPage.data中循环的属性拿到 -->
    <!-- 表格列 label:显示列头 -->
    <!-- 表格列 width:控制表格一列宽度 -->
    <el-table-column prop="id" label="ID" width="100" />
    <!-- formatter:日期格式化 拿到当前prop中的日期数据 放到dateFormat中 进行格式化 -->
    <el-table-column prop="addTime" label="入库时间" :formatter="dateFormat" width="180" />
    <el-table-column prop="name" label="菜单名称" width="180" />
    <el-table-column prop="url" label="密码" width="180" />
    <el-table-column prop="icon" label="图标" width="180" />
    <el-table-column prop="parentId" label="父菜单" width="180" />
    <el-table-column prop="id" label="操作" width="180">
      <!-- 通过template+v-slot 可以拿到当前行数据 -->
      <template v-slot="scope">
        <!-- 将当前行row传递到方法中 编辑场景需要拿到id、属性值 之后提交到后台 如果有修改就更新掉 -->
        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
        <!-- 将当前行row中的id拿到方法方法中 -->
        <el-button type="danger" @click="delByIds(scope.row.id)">删除</el-button>
      </template>

    </el-table-column>

  </el-table>

  <!-- 分页工具:elementPlus 会帮助我们画好 当点击分页 需要我们自己写方法 elementPlus负责调用  -->
  <!-- page-sizes:预留 每页多少条 -->
  <el-pagination
      v-model:currentPage="current"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <el-dialog
      v-model="dialogVisible"
      :title="row == '' ? '新增':'编辑'"
      width="30%"
  >

    <el-input type="text"  v-model="name"   class="w-50 m-2" style="margin-bottom: 5px" size="large" placeholder="请输入菜单名称" autocomplete="off" />
    <el-input type="text"  v-model="url"   class="w-50 m-2" style="margin-bottom: 5px" size="large" placeholder="请输入菜单地址" autocomplete="off" />
    <el-input type="text"  v-model="icon"   class="w-50 m-2" style="margin-bottom: 5px" size="large" placeholder="请输入图标" autocomplete="off" />
    <el-input type="text"  v-model="parentId"   class="w-50 m-2" style="margin-bottom: 5px" size="large" placeholder="请输入父菜单" autocomplete="off" />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false;save()" type="primary" >保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
//导入ajax远程工具
import {getData,postData} from '../common/remote'
//导入日期格式化工具 需要独立安装 cnpm install moment https://blog.csdn.net/qq_38933412/article/details/82879127
import moment from "moment"

export default {
  name: "list",
  data(){
    return{
      ids:[],//批量删除使用
      iPage:Object,//分页工具
      current:1,//当前页
      pageSize:10,//每页默认条数
      dialogVisible:false,//新增、编辑模态框控制
      row:'',//点击编辑当前行
      total:0,//分页总计 created初始化会赋值

      name:'',//模态框中使用的 菜单名
      url:'',//模态框中使用的 密码
      icon:'',//模态框中使用的 密码
      parentId:'',//模态框中使用的 密码
    }
  },
  methods:{
    edit(r){ //点击行中的编辑按钮 将模态框打开 并且将数据赋值上 方便提交
      this.row = r //行
      this.dialogVisible = true //打开模态框
      param['name'] = this.name
      param['url'] = this.url
      param['icon'] = this.icon
      param['parentId'] = this.parentId
    },
    save(){
      const param = {}
      if(this.row == ''){ //
        param['name'] = this.name
        param['url'] = this.url
        param['icon'] = this.icon
        param['parentId'] = this.parentId
      }else{//编辑 根据id进行编辑 入库时间还是原来的时间 或者可以给一个新的时间
        param['id'] = this.row.id
        param['addTime'] = this.row.addTime
        param['name'] = this.name
        param['url'] = this.url
        param['icon'] = this.icon
        param['parentId'] = this.parentId
      }
      postData('/menu/add',param).then(ret=>{ //post请求服务端

      })
      this.$router.go(0) //跳转刷新页面
    },
    dateFormat:function(row,column){//日期处理
      var date = row[column.property];
      if(date === undefined){
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    selectAll(dataList){ //全选 反选 将所有的id添加到ids中 方便批量删除使用
      const self = this
      dataList.forEach(function(e){
        self.ids.push(e.id)
      })
    },
    handleSizeChange(){ //切换分页pageSize的时候重新请求数据
      const self = this
      getData('/menu/list',{current:this.current,pageSize:this.pageSize}).then(ret=>{
        self.iPage = ret.data.iPage
      })
    },
    handleCurrentChange(){ //分页点击页码、上一页、下一页的时候调用
      const self = this
      getData('/menu/list',{current:this.current,pageSize:this.pageSize}).then(ret=>{
        self.iPage = ret.data.iPage
      })
    },
    delByIds(id){ //批量删除 如果点击行内删除 会传递一个id过来 如果点击全部删除 id是null 下面if判断不走
      if(id){
        this.ids.push(id) //行内删除存在id 将id添加到ids中 实现批量删除和行内删除共用同一个方法
      }
      postData('/menu/delete',this.ids).then(ret=>{
        console.log(ret)
      })
      this.$router.go(0) //删除后刷新页面
    }
  },
  created() {
    const self = this //VUE当前对象赋值给一个变量 这样下面的匿名方法内部才能使用
    getData('/menu/list').then(ret=>{
      self.iPage = ret.data.iPage
      self.total = self.iPage.total
    })

  }
}
</script>

<style scoped>


</style>